<template>
    <div class="map-container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <div class="nav-item" :class="{ active: activeTab === 0 }" @click="changeTab(0)">全国概况</div>
            <div class="nav-item" :class="{ active: activeTab === 1 }" @click="changeTab(1)">总视</div>
            <div class="nav-item" :class="{ active: activeTab === 2 }" @click="changeTab(2)">细化</div>
        </div>

        <!-- 主内容 -->
        <div class="map-content">
            <!-- 左侧图例 -->
            <div class="legend">
                <div v-for="item in legendData" :key="item.label" class="legend-item">
                    <span class="dot" :style="{ backgroundColor: item.color }"></span>
                    <span :style='{ color: item.color }'>{{ item.label }}</span>
                </div>
            </div>

            <!-- 地图 -->
            <div class="map">
                <div class="map-chart" ref="chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

// 激活的标签索引
const activeTab = ref(1);

// 图例数据
const legendData = ref([
    { label: '50%', color: '#FFD700' }, // 黄色
    { label: '30%', color: '#FF8C00' }, // 橙色
    { label: '23%', color: '#00BFFF' }, // 蓝色
]);

// 地图点位数据
const mapData = ref([
    { name: '北京', value: 50, longitude: 116.407526, latitude: 39.90403 },
    { name: '上海', value: 30, longitude: 121.473701, latitude: 31.230416 },
    { name: '广州', value: 23, longitude: 113.264385, latitude: 23.129112 },
]);

// 地图实例
let chart: echarts.ECharts | null = null;

// 切换标签方法
const changeTab = (index: number) => {
    activeTab.value = index;
};

// 加载中国地图数据
const loadMapData = async () => {
    try {
        const response = await axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000.json'); // 确保正确加载中国地图的GeoJSON数据
        echarts.registerMap('china', response.data); // 注册中国地图
        initMap(); // 初始化地图
    } catch (error) {
        console.error('Failed to load map data:', error);
    }
};

const initMap = () => {
    chart = echarts.init(document.querySelector('.map-chart') as HTMLElement);
    const option = {
        // backgroundColor: '#0f1c34', // 地图背景颜色
        tooltip: {
            trigger: 'item',
            formatter: (params: any) => {
                if (params.data) {
                    return `${params.name}: ${params.data.value}%`;
                }
                return params.name;
            },
        },
        geo: {
            map: 'china', // 使用注册的中国地图
            roam: true, // 允许缩放和平移
            itemStyle: {
                normal: {
                    borderColor: '#00ffff', // 蓝色发光边界
                    areaColor: '#001D34', // 深蓝色区域
                    shadowColor: 'rgba(0, 255, 255, 0.5)', // 边界阴影颜色
                    shadowBlur: 0, // 边界阴影模糊值
                    borderWidth: 4, // 增加边框宽度
                },
                emphasis: {
                    areaColor: '#23b7e5', // 鼠标悬停区域颜色
                    shadowColor: 'rgba(0, 255, 255, 0.8)', // 青色发光效果
                    shadowBlur: 150, // 进一步增加发光范围
                    borderWidth: 4, // 边框宽度设置为4，以形成更厚的发光边界
                    borderColor: '#00ffff', // 边缘发光颜色
                    borderType: 'solid',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                },
            },
            label: {
                show: false // 关闭地理标签
            },
            emphasis: {
                label: {
                    show: false // 关闭鼠标悬停时的标签
                },
            },
        },
        series: [
            {
                name: '热点分布',
                type: 'effectScatter', // 效果散点图
                coordinateSystem: 'geo',
                data: mapData.value.map((item) => ({
                    name: item.name,
                    value: [item.longitude, item.latitude, item.value],
                })),
                symbolSize: (val: any) => val[2] / 2, // 点的大小根据值动态调整
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke', // 发光效果类型
                    scale: 3, // 扩散波纹的大小
                    period: 4, // 扩散周期
                },
                hoverAnimation: true,
                itemStyle: {
                    color: (params: any) => {
                        if (params.value[2] > 40) {
                            return '#FFD700'; // 金黄色
                        } else if (params.value[2] > 20) {
                            return '#FF8C00'; // 橙色
                        } else {
                            return '#00BFFF'; // 蓝色
                        }
                    },
                    shadowBlur: 20, // 点的阴影模糊
                    shadowColor: 'rgba(255, 255, 255, 0.8)', // 阴影颜色
                },
                label: {
                    show: true,
                    formatter: (params: any) => `${params.name}`, // 显示地点名称
                    position: 'right',
                    color: '#fff',
                    fontSize: 12,
                },
            },
        ],
    };

    chart.setOption(option);
};


// 监听地图数据变化并更新地图
watch(
    mapData,
    () => {
        if (chart) {
            const updatedSeries = [
                {
                    name: '热点分布',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: mapData.value.map((item) => ({
                        name: item.name,
                        value: [item.longitude, item.latitude, item.value],
                    })),
                    symbolSize: (val: any) => val[2] / 2,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke',
                    },
                    hoverAnimation: true,
                    itemStyle: {
                        color: '#FFD700',
                        shadowBlur: 10,
                        shadowColor: '#333',
                    },
                },
            ];
            chart.setOption({ series: updatedSeries });
        }
    },
    { deep: true }
);

// 初始化
onMounted(() => {
    loadMapData(); // 加载地图数据
});
</script>

<style scoped lang="scss">
/* 地图容器 */
.map-container {
    color: #fff;
    padding: 16px;
    height: calc(34.2vh);
    border-radius: 8px;
    width: calc(100% + 8.4vh);
    max-width: calc(480px + 8.4vh);
    margin: 0 auto;

    /* 顶部导航 */
    .top-nav {
        display: flex;
        margin-bottom: 16.2px;

        .nav-item {
            padding: 7.2px 16.2px;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            height: 8px;
            width: 56px;
            text-align: center;
            line-height: 8px;
            border: 1.35px solid transparent;
            border-radius: 3.6px;
            transition: all 0.3s ease;
        }

        .nav-item:nth-child(2) {
            margin-left: 80px;
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item:nth-child(3) {
            clip-path: polygon(20% 0, 90% 0, 90% 100%, 0 100%);
            border: 1.6px solid rgb(8, 110, 112);
        }

        .nav-item.active {
            background-color: rgb(32, 174, 226);
        }
    }

    /* 主内容 */
    .map-content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        /* 使图例和地图能够适当分布 */
        /* 左侧图例 */
        .legend {
            flex: 0 0 calc(50px + 8.4vh);
            /* 设置图例容器宽度为 50px */
            padding: 20px; /* 添加内边距 */
            border-radius: 8px;
            width: calc(75px + 8.4vh);

            .legend-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                font-size: 25px;

                .dot {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-right: 8px;
                }

            }
        }

        /* 地图容器 */
        .map {
            flex: 1;
            height: calc(28.7vh);
            /* 容器高度 */
            border-radius: 8px;
            position: relative;
            /* 设置相对定位以支持内部绝对定位 */
            overflow: hidden;

            /* 确保溢出的部分隐藏 */
            /* 地图内容 */
            .map-chart {
                width: 100%;
                height: calc(100% + 15.5vh);
                position: relative;
                top: -3vh;
                /* 将地图内容向上移动 3vh */
                /* 保持地图内容尺寸充满容器 */
            }
        }
    }
}
</style>